<!-- 小游戏 -->
<template>
  <div id="MiniGames">
    <!-- 头部 -->
    <Head BackType1="1" title="小游戏"></Head>
    <div id="MiniGamesMain">
      <a class="MiniGamesBox BoxActive" v-for="(game,index) in games" :key="index" :href="game.url">
          <img class="MiniGamesImg" :src="game.icon" alt="">
          <div class="Name overflow">{{game.name}}</div>
      </a>
    </div>
    
  </div>
</template>

<script>
  import Head from "../components/Head"
  export default {
    data(){
      return{
        games:[]
      }
    },
    components:{
        Head,
    },
    mounted(){
      /**
      * 我的游戏列表
      */
      var gameIndextext={
        page:1,
        pageSize:10
      }
      this.$post(urlConfig.gameIndex,gameIndextext)
      .then(res => {
        console.log(res);
        let Arr = new Array();
        Arr = res.data.list
        for (let i=0; i<Arr.length; i++){
          if(Arr[i].icon.replace(/\s/g,"") ==''){
            Arr[i].icon = require('@/assets/img/MinGames.png')
          }else{
            Arr[i].icon = urlConfig.BaseUrl1+Arr[i].icon
            console.log(Arr[i].icon)
          }
          this.games.push(Arr[i])
        }
      })
    },
    methods:{
      
      
    }
  }
</script>

<style lang="less" scoped>
  #MiniGames{
    #MiniGamesMain{
      position: fixed;
      top:88px;
      left: 0;
      overflow: scroll;
      bottom: 0;
      margin-top: 5px;
      .MiniGamesBox{
        margin-top: 5px;
        height: 120px;
        width: 690px;
        padding: 0 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #fff;
        .MiniGamesImg{
          height: 90px;
          width: 90px;
          border: 2px #d6d7dc solid;
          border-radius: 45px;
        }
        .Name{
          padding-left: 20px;
          width: 576px;
          color: #323232;
          font-size: 32px;
          font-family: PingFangSC-Medium;
        }
      }
    }
  }
</style>